<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Manager</title>
  <link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <link href="app/css/main.css" rel="stylesheet">
</head>
<body>
<header class="bs-header">
  <div class="container">
    <h1>Contact Manager</h1>
    <p>Simple Backbone.js example application</p>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-xs-12 main-container">
    </div>
  </div>
</div>

<script type="text/template" id="tpl-contacts">
  <h2 class="page-header text-center">List of contacts</h2>
  <p class="text-center">
    <a href="#contacts/new" class="btn btn-lg btn-outline">Add Contact</a>
  </p>
  <ul class="media-list row contacts-container"></ul>
</script>

<script type="text/template" id="tpl-contact">
  <div class="thumbnail">
    <img class="media-object" src="app/img/faces/<%- avatar %>">
  </div>
  <div class="media-heading">
    <h3>
      <%- name %>
      <small>
        <a href="#contacts/edit/<%- id %>"><span class="glyphicon glyphicon-pencil"></span></a>
        <a href="#contacts/delete/<%- id %>" class="delete-contract">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </small>
    </h3>
  </div>
  <div class="media-body">
    <dl>
      <dt>Phone Number:</dt>
      <dd><%- tel %></dd>
      <dt>Email:</dt>
      <dd><%- email %></dd>
    </dl>
  </div>
  <hr>
</script>

<script type="text/template" id="tpl-new-contact">
  <h2 class="page-header text-center"><%= isNew ? 'Create' : 'Edit' %> Contact</h2>
  <form role="form" class="form-horizontal contract-form">
    <div class="form-group">
      <label class="col-sm-4 control-label">Full name:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control contact-name-input" value="<%- name %>">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label">Email address:</label>
      <div class="col-sm-6">
        <input type="email" class="form-control contact-email-input" value="<%- email %>">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label">Telephone number:</label>
      <div class="col-sm-6">
        <input type="tel" class="form-control contact-tel-input" value="<%- tel %>">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-4 col-sm-3">
        <button type="submit" class="btn btn-outline btn-lg btn-block">Submit</button>
      </div>
      <div class="col-sm-3">
        <a href="#contacts" class="btn btn-outline btn-lg btn-block">Cancel</a>
      </div>
    </div>
  </form>
</script>

<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/underscore/underscore.js"></script>
<script src="vendor/backbone/backbone.js"></script>

<script src="app/js/app.js"></script>
<script src="app/js/models/contact.js"></script>
<script src="app/js/collections/contacts.js"></script>
<script src="app/js/views/contact.js"></script>
<script src="app/js/views/contacts.js"></script>
<script src="app/js/views/contactForm.js"></script>
<script src="app/js/router.js"></script>

<script>
  $(function() {
    ContactManager.start({
      contacts: [
        {
          id: 1,
          name : 'Terrence S. Hatfield',
          tel: '651-603-1723',
          email: 'TerrenceSHatfield@rhyta.com'
        },
        {
          id: 2,
          name : 'Chris M. Manning',
          tel: '513-307-5859',
          email: 'ChrisMManning@dayrep.com'
        },
        {
          id: 3,
          name : 'Ricky M. Digiacomo',
          tel: '918-774-0199',
          email: 'RickyMDigiacomo@teleworm.us'
        },
        {
          id: 4,
          name : 'Michael K. Bayne',
          tel: '702-989-5145',
          email: 'MichaelKBayne@rhyta.com'
        },
        {
          id: 5,
          name : 'John I. Wilson',
          tel: '318-292-6700',
          email: 'JohnIWilson@dayrep.com'
        },
        {
          id: 6,
          name : 'Rodolfo P. Robinett',
          tel: '803-557-9815',
          email: 'RodolfoPRobinett@jourrapide.com'
        }
      ]
    });
  });
</script>
</body>
</html>
